<template>
    <div style='background: black'>
        <el-row :gutter='20'>
            <el-col :span='7'>
                <el-card shadow='hover' class='mgb20' style='height:530px;'>
                    <template #header>
                        <div class='clearfix'>
                            <span>数据展示</span>
                        </div>
                    </template>
                    <data-simpl :mode='"table"'></data-simpl>
                </el-card>
                <el-card shadow='hover' class='mgb20' style='height:450px;'>
                    <template #header>
                        <div class='clearfix'>
                            <span>海平面/海底测距显示</span>
                        </div>
                    </template>
                    <sea-distance-chart></sea-distance-chart>
                </el-card>
            </el-col>
            <el-col :span='14'>
<!--                数据显示-->
                <el-row :gutter='20'>
                    <el-col :span='16'>
                        <el-card shadow='hover' class='mgb20' style='height:600px; padding: 0' :key="componentKey">
                            <template #header>
                                <div class='clearfix'>
                                    <span>罗盘</span>
                                </div>
                            </template>
                            <el-row style='top: -50px'>
                                <el-col :span='12' type="flex" justify="center" align="middle">
                                    <compass-board-x :wid='width' :hght='height'></compass-board-x>
                                </el-col>
                                <el-col :span='12' type="flex" justify="center" align="middle">
                                    <compass-board-y :wid='width' :hght='height'></compass-board-y>
                                </el-col>
                            </el-row>
                            <el-row style='top: -150px; height: 100%' type="flex" justify="center" align="middle">
                                <compass-board-z :wid='width' :hght='height'></compass-board-z>
                            </el-row>
                        </el-card>
<!--                        <el-card shadow='hover' class='mgb20' style='height:340px; padding: 0'>-->
<!--                            <template #header>-->
<!--                                <div class='clearfix'>-->
<!--                                    <span>罗盘</span>-->
<!--                                </div>-->
<!--                            </template>-->
<!--                            <compass-board-x></compass-board-x>-->
<!--                        </el-card>-->
                    </el-col>
                    <el-col :span='8'>
                        <el-card shadow='hover' class='mgb20' style='height:375px;'
                                 :body-style="{padding:'0px'}">
                            <template #header>
                                <div class='clearfix'>
                                    <span>机器状态</span>
                                </div>
                            </template>
                            <el-row style='top: -20px; left: -30px'>
                                <model ref='model'></model>
                            </el-row>
                        </el-card>
                        <el-card shadow='hover' class='mgb20' style='height:100%;' :body-style="{padding:'0px'}">
                            <template #header>
                                <div class='clearfix'>
                                    <span>剩余时间</span>
                                </div>
                            </template>
                            <time-panel></time-panel>
                        </el-card>
                    </el-col>
<!--                    <el-col :span='8'>-->
<!--                        <el-card shadow='hover' class='mgb20' style='height:600px;' :body-style="{padding:'0px'}">-->
<!--                            <template #header>-->
<!--                                <div class='clearfix'>-->
<!--                                    <span>机器状态</span>-->
<!--                                </div>-->
<!--                            </template>-->
<!--                            <el-row style='top: 120px; left: -30px'>-->
<!--                                <model ref='model'></model>-->
<!--                            </el-row>-->
<!--                        </el-card>-->
<!--                    </el-col>-->
                </el-row>
<!--                控制台-->
                <el-row :gutter='20'>
                    <el-col :span='18'>
                        <el-card shadow='hover' class='mgb20' style='height:338px;'>
                            <template #header>
                                <div class='clearfix'>
                                    <span>控制台</span>
                                </div>
                            </template>
                            <operator-panel :mode='"dash"'></operator-panel>
                        </el-card>
                    </el-col>
                    <el-col :span='6'>
                        <el-card shadow='hover' class='mgb20' style='height:169px;'>
                            <template #header>
                                <div class='clearfix'>
                                    <span>应急操作</span>
                                </div>
                            </template>
                            <emergency-panel></emergency-panel>

                        </el-card>
                        <el-card shadow='hover' class='mgb20' style='height:169px;'>
                            <el-button class='button' type='primary' style='width: 100%'>
                                <router-link :to="'/gameMode'">
                                    <svg style='height: 100px; width: 100px' t="1655893171028" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2278" width="200" height="200"><path d="M982.016 630.784q0 24.576-17.92 43.52t-49.664 18.944l-796.672 0q-29.696 0-49.152-16.896t-19.456-49.664l0-423.936q0-22.528 18.944-40.448t53.76-17.92l790.528 0q34.816 0 52.224 20.992t17.408 46.592l0 418.816zM836.608 228.352q-6.144 0-10.752 4.608t-4.608 11.776 4.608 11.264 10.752 4.096l79.872 0q6.144 0 10.752-4.096t4.608-11.264-4.608-11.776-10.752-4.608l-79.872 0zM835.584 299.008q-15.36 0-15.36 16.384 0 6.144 4.096 10.752t11.264 4.608l79.872 0q7.168 0 11.776-4.608t4.608-10.752q0-16.384-16.384-16.384l-79.872 0zM900.096 504.832q0-11.264-7.168-18.432t-18.432-7.168-18.432 7.168-7.168 18.432 7.168 18.432 18.432 7.168 18.432-7.168 7.168-18.432zM770.048 208.896l-648.192-1.024 0 423.936 647.168 0zM823.296 582.656q10.24 0 17.92-7.68t7.68-18.944-7.68-18.432-17.92-7.168q-11.264 0-18.944 7.168t-7.68 18.432 7.68 18.944 18.944 7.68zM874.496 633.856q11.264 0 18.432-7.168t7.168-18.432-7.168-18.432-18.432-7.168-18.432 7.168-7.168 18.432 7.168 18.432 18.432 7.168zM926.72 582.656q10.24 0 17.92-7.68t7.68-18.944-7.68-18.432-17.92-7.168q-11.264 0-18.944 7.168t-7.68 18.432 7.68 18.944 18.944 7.68z" p-id="2279" fill="#ffffff"></path></svg>
<!--                                    <div style='font-size: 30px'>-->
<!--                                        切换为掌机页<br/>(图片占位)-->
<!--                                    </div>-->
                                </router-link>
                            </el-button>
                        </el-card>
                    </el-col>
                </el-row>
            </el-col>
            <el-col :span="3">
                <el-card shadow='hover' class='mgb20' style='height:100%;'>
                    <template #header>
                        <div class='clearfix'>
                            <span>通信状态</span>
                        </div>
                    </template>
                    <correspondence-status></correspondence-status>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>


<script>


const getUserIP= (onNewIP)=> {
    let MyPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
    let pc = new MyPeerConnection({
        iceServers: []
    });
    let noop = () => {
    };
    let localIPs = {};
    let ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/g;
    let iterateIP = (ip) => {
        if (!localIPs[ip]) onNewIP(ip);
        localIPs[ip] = true;
    };
    pc.createDataChannel('');
    pc.createOffer().then((sdp) => {
        sdp.sdp.split('\n').forEach(function (line) {
            if (line.indexOf('candidate') < 0) return;
            line.match(ipRegex).forEach(iterateIP);
        });
        pc.setLocalDescription(sdp, noop, noop);
    }).catch((reason) => {
    });
    pc.onicecandidate = (ice) => {
        if (!ice || !ice.candidate || !ice.candidate.candidate || !ice.candidate.candidate.match(ipRegex)) return;
        ice.candidate.candidate.match(ipRegex).forEach(iterateIP);
    };
}

export default {
    name: 'dashboard',
    data() {
        return {
            alter : '0',
            fromPath : '',
            ip : '',
            interval : null,
            num : 0,
            componentKey: 0,
            width : '300px',
            height : '300px',
            isFull : false,
        };
    },
    components: {
        CompassBoardX :() => import("@/components/common/dashboards/CompassBoardX"),
        CompassBoardY :() => import("@/components/common/dashboards/CompassBoardY"),
        CompassBoardZ :() => import("@/components/common/dashboards/CompassBoardZ"),
        SpeedBoard :() => import("@/components/common/dashboards/SpeedBoard"),
        TemperatureBoard :() => import("@/components/common/dashboards/TemperatureBoard"),
        PressureBoard :() => import("@/components/common/dashboards/PressureBoard"),
        LineChart :() => import("@/components/common/templates/LineChart"),
        ThrusterHori :() => import("@/components/common/thrusters/ThrusterHori"),
        ThrusterVert :() => import("@/components/common/thrusters/ThrusterVert"),
        model :() => import("@/components/common/templates/model"),
        OperatorPanel :() => import("@/components/common/dashboards/OperatorPanel"),
        CorrespondenceStatus :() => import("@/components/common/status/CorrespondenceStatus"),
        SeaDistanceChart :() => import("@/components/common/charts/SeaDistanceChart"),
        DataSimpl :() => import("@/components/common/status/DataSimpl"),
        EmergencyPanel :() => import("@/components/common/dashboards/EmergencyPanel"),
        TimePanel :() => import("@/components/common/status/TimePanel")
    },
    computed: {
    },

    methods: {
        reset() {
            this.$refs.model.reset()
        },
        forceRerender() {
            this.componentKey += 1;
        },
        // 启动手柄
        startgamepad() {
            var _this = this;
            console.log(this.isFull)
            if (this.isFull == false) {
                this.fullScreen()
            }
            // 每200ms 获取一次手柄数据，查看是否按下手柄按键
            this.interval = setInterval(function() {
                var gamepad = navigator.getGamepads()[0];
                _this.pressKey(gamepad.buttons);
            }, 200);
        },
        // 手柄按键
        pressKey(arr) {
            console.log(arr);
            for (let i = 0; i < arr.length; i++) {
                if (arr[i].value === 1) {
                    if (i === 4) {
                        console.log('左手1');
                        // this.setActiveItemPrev();
                    }
                    if (i === 5) {
                        console.log('右手1');
                        // this.setActiveItemNext();
                    }
                    if (i == 2) {
                        console.log('X' + this.isFull);
                        if (this.isFull) {
                            this.exitFullScreen()
                        }
                        else {
                            this.fullScreen()
                        }
                    }
                }

            }
        },
        fullScreen() {
            this.isFull = true
            var el = document.documentElement;
            var rfs = el.requestFullScreen || el.webkitRequestFullScreen ||
                el.mozRequestFullScreen || el.msRequestFullScreen;
            if (typeof rfs != "undefined" && rfs) {
                rfs.call(el);
            } else if (typeof window.ActiveXObject != "undefined") {
                var wscript = new ActiveXObject("WScript.Shell");
                if (wscript != null) {
                    wscript.SendKeys("{F11}");
                }
            }
        },
        exitFullScreen(el) {
            this.isFull = false
            var el = document
            var cfs = el.cancelFullScreen || el.mozCancelFullScreen || el.msExitFullscreen || el.webkitExitFullscreen ||
                el.exitFullscreen,
                wscript
            if (cfs) {
                cfs.call(el);
                return;
            } else if (typeof window.ActiveXObject !== "undefined") {
                var wscript = new ActiveXObject("WScript.Shell");
                if (wscript != null) {
                    wscript.SendKeys("{F11}");
                }
            } else {
                alert('浏览器不支持全屏API或已被禁用')
            }
        }
    },
    beforeRouteEnter(to, from, next) {
        next(vm => {
            // 通过 `vm` 访问组件实例,将值传入fromPath
            vm.fromPath = from.path
        })
    },
    created() {
        var _this = this;
        document.body.style.zoom = '80%'
        var restoredSession = JSON.parse(sessionStorage.getItem('gamepadInfo'));
        if (restoredSession === 'connected') {
            _this.$message.success('手柄已连接，按X进入全屏');
            document.body.style.zoom = '60%'
            _this.startgamepad(); // 启动手柄
        }
        // 监听游戏手柄
        window.addEventListener('gamepadconnected', function(e) {
            _this.$message.success('手柄已连接');
            document.body.style.zoom = '60%'
            var gp = navigator.getGamepads()[e.gamepad.index];
            sessionStorage.setItem('gamepadInfo', JSON.stringify("connected"))
            _this.startgamepad(); // 启动手柄
        });
        // 监听游戏手柄拔出
        window.addEventListener('gamepaddisconnected', function(e) {
            _this.$message.info('手柄已断开');
            document.body.style.zoom = '80%'
            sessionStorage.setItem('gamepadInfo', JSON.stringify("disconnected"))
        });
    },
    mounted() {
    }
};
</script>

<style scoped>
.el-row {
    margin-bottom: 20px;
}

.grid-content {
    display: flex;
    align-items: center;
    height: 100px;
}

.grid-cont-right {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: #999;
}

.grid-num {
    font-size: 30px;
    font-weight: bold;
}

.grid-con-icon {
    font-size: 50px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    color: #fff;
}

.grid-con-1 .grid-con-icon {
    background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
    background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
    background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
    color: rgb(242, 94, 67);
}

.user-info {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
}

.user-avator {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

.user-info-cont {
    padding-left: 50px;
    flex: 1;
    font-size: 14px;
    color: #999;
}

.user-info-cont div:first-child {
    font-size: 30px;
    color: #222;
}

.user-info-list {
    font-size: 14px;
    color: #999;
    line-height: 25px;
}

.user-info-list span {
    margin-left: 70px;
}

.mgb20 {
    margin-bottom: 20px;
}

.todo-item {
    font-size: 14px;
}

.todo-item-del {
    text-decoration: line-through;
    color: #999;
}

.schart {
    width: 100%;
    height: 300px;
}


.content-view {
    height: calc(100vh - 84px);
    background-color: #FFFFFF;
    padding: 20px;
}

.item-view {
    margin-bottom: 1rem;
}

/* 渐变进度条 */
.el-bg-inner-running .el-progress-bar__inner {
    background-color: unset;
    background-image: linear-gradient(to right, #3587d8, #6855ff);
}

.el-bg-inner-error .el-progress-bar__inner {
    background-image: linear-gradient(to right, #3587d8, #fb3a7e);
}

.el-bg-inner-done .el-progress-bar__inner {
    background-image: linear-gradient(to right, #3587d8, #53ff54);
}

::v-deep .el-tabs__item {
    font-size: 15px;
    height: 58px;
    padding-top : 5%;
}


.el-card__body {
    height: 100%;
    background: #403D39;
    border: none;
    color: white;
}

.el-card {
    background: #232323;
    border: none;
}
>>> .el-card__header {
    /*border-bottom: gray 1px solid;*/
    border-bottom: none;
}
* {
    color: white;
}

.button {
    height: 100px;
    width: 70px;
    background-color: transparent; border-color: white
}

</style>
